<!-- 
  RepeatIcon.vue is a part of Moosync.
  
  Copyright 2021-2022 by Sahil Gupte <sahilsachingupte@gmail.com>. All rights reserved.
  Licensed under the GNU General Public License. 
  
  See LICENSE in the project root for license information.
-->

<template>
  <svg
    class="button-grow"
    width="27"
    height="27"
    viewBox="0 0 27 27"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    @click="$emit('click', $event)"
  >
    <path
      class="fill"
      d="M24.2035 7.45811C25.3609 8.67054 26.1457 10.1899 26.4645 11.8354C26.7834 13.481 26.6229 15.1835 26.0021 16.7405C25.3813 18.2974 24.3264 19.6433 22.9629 20.6181C21.5993 21.5929 19.9845 22.1555 18.3104 22.239L17.8751 22.25L10.6716 22.2478L13.1829 24.7612C13.3641 24.9422 13.476 25.181 13.4992 25.4361C13.5224 25.6911 13.4553 25.9462 13.3098 26.1569L13.1829 26.3078C13.0019 26.489 12.7631 26.6009 12.5081 26.6241C12.253 26.6473 11.9979 26.5803 11.7873 26.4347L11.6363 26.3078L7.25695 21.9284C7.07609 21.7472 6.96456 21.5082 6.94178 21.2532C6.91899 20.9982 6.9864 20.7432 7.13226 20.5328L7.25695 20.3819L11.6363 16.0025C11.8292 15.8087 12.0877 15.6942 12.3609 15.6816C12.634 15.6689 12.902 15.7591 13.112 15.9342C13.322 16.1093 13.4587 16.3567 13.4953 16.6277C13.532 16.8987 13.4657 17.1735 13.3098 17.3981L13.1829 17.5512L10.6716 20.0603H17.8751C19.5486 20.0604 21.159 19.4212 22.3768 18.2733C23.5946 17.1254 24.3279 15.5556 24.4266 13.885L24.4376 13.5C24.4402 11.7723 23.7592 10.1138 22.5432 8.88655C22.3436 8.68454 22.2303 8.41281 22.2275 8.12883C22.2246 7.84484 22.3323 7.57087 22.5278 7.36487C22.7233 7.15886 22.9912 7.03697 23.275 7.02498C23.5587 7.01299 23.836 7.11183 24.0482 7.30061L24.2057 7.45811H24.2035ZM15.2151 0.565299L15.3682 0.689987L19.7454 5.06936L19.8723 5.22249C19.9983 5.40514 20.0658 5.62181 20.0658 5.84374C20.0658 6.06566 19.9983 6.28234 19.8723 6.46499L19.7454 6.61811L15.3682 10.9953L15.2151 11.1222C15.0324 11.2482 14.8157 11.3157 14.5938 11.3157C14.3719 11.3157 14.1552 11.2482 13.9726 11.1222L13.8194 10.9953L13.6948 10.8422C13.5687 10.6595 13.5012 10.4428 13.5012 10.2209C13.5012 9.999 13.5687 9.78232 13.6948 9.59967L13.8194 9.44655L16.3307 6.93749H9.12507C7.45117 6.93739 5.84051 7.57695 4.62263 8.7253C3.40474 9.87364 2.67171 11.444 2.57351 13.115L2.56257 13.5C2.56257 15.2937 3.28226 16.9169 4.44601 18.1025C4.63029 18.3129 4.72695 18.5859 4.71612 18.8654C4.70529 19.1449 4.58779 19.4097 4.38778 19.6052C4.18777 19.8007 3.92044 19.9122 3.64077 19.9167C3.36109 19.9212 3.09033 19.8184 2.88413 19.6294C1.70296 18.4261 0.894608 16.9071 0.556326 15.2553C0.218043 13.6034 0.364238 11.889 0.977324 10.3183C1.59041 8.74755 2.64427 7.38742 4.01213 6.4015C5.37999 5.41558 7.00357 4.84588 8.68757 4.76092L9.12507 4.74999L16.3307 4.7478L13.8194 2.23874L13.6948 2.08561C13.5507 1.87507 13.4848 1.62078 13.5084 1.36676C13.532 1.11274 13.6436 0.874956 13.824 0.69456C14.0044 0.514165 14.2422 0.402505 14.4962 0.3789C14.7502 0.355295 15.0045 0.421231 15.2151 0.565299Z"
      :fill="filled ? 'var(--accent)' : 'var(--textSecondary)'"
    />
  </svg>
</template>

<script lang="ts">
import { Vue } from 'vue-facing-decorator'
import { Component, Prop } from 'vue-facing-decorator'

@Component({
  emits: ['click']
})
export default class SpotifyIcon extends Vue {
  @Prop({ default: false })
  filled!: boolean
}
</script>

<style lang="sass" scoped>
.fill
  transition: fill 0.2s ease

*
  cursor: pointer
</style>
